import React from 'react';
import ThemeContext from '../theme-context'
const ThemedBar = () => {//注意这里并没有传入任何的属性
  return (
    //被ThemeContext.Consumer所包裹的地方返回的是一个表达式，表达式里面接受一个函数，形参就是Provider传入的值。 
    <ThemeContext.Consumer>
      {
        theme => {
          // console.log(theme)
          return (
            <div
              className="alert mt-5"
              style={{backgroundColor:theme.bgColor,color: theme.color}}
            >
              样式区域
              <button className={theme.classnames}>
                样式按钮
              </button>
            </div>
          )
        } 
      }
    </ThemeContext.Consumer>
  )
}
export default ThemedBar;
